<template>
  <div :style="{ height: '100vh' }">
    <el-container
      :style="{
        height: '100%',
        overflow: 'hidden',
        display: 'flex',
        flexDirection: 'column'
      }"
    >
      <div class="header">
        <p :style="{ width: width }" class="header_left">KIMI潮赏</p>
        <div class="header_right">
          <span @click="status" class="header_icon">
            <i
              :class="icon"
              :style="{ fontSize: '26px', lineHeight: '60px', color: '#fff' }"
            ></i>
          </span>
          <div class="header_action">
            <!-- <i class="el-icon-bell icon" :style="{fontSize:'26px',lineHeight:'60px',color:'#fff'}"></i> -->
            <el-dropdown :style="{ color: '#fff' }">
              <span class="el-dropdown-link" :style="{ cursor: 'pointer' }">
                {{ userData.username
                }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="logout"
                  >退出登录</el-dropdown-item
                >
                <el-dropdown-item @click.native="password"
                  >重置密码</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
      <el-container
        :style="{
          height: '100%',
          overflowY: 'scroll',
          overflowX: 'hidden',
          background: '#fff'
        }"
      >
        <el-aside
          :style="{ height: '100%', overflowX: 'hidden', width: width }"
        >
          <el-menu
            unique-opened
            :collapse="isCollapse"
            router
            :default-active="onRouter"
            :style="{ height: '100%' }"
          >
            <el-menu-item index="index"
              ><i class="el-icon-s-home"></i
              ><span slot="title">首页</span></el-menu-item
            >
            <el-submenu
              :index="item.name"
              v-for="item in menuData"
              :key="item.id"
            >
              <template slot="title">
                <i :class="item.icon"></i>
                <span>{{ item.name }}</span>
              </template>
              <el-menu-item
                :index="value.url"
                v-for="value in item.childrenList"
                :key="value.id"
                @click="tag(value)"
              >
                <i :class="value.icon"></i>{{ value.name }}
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main :style="{ background: '#fff' }">
          <div class="tags" v-if="tagStatus">
            <el-tag
              :key="index"
              @click="select(tag.url)"
              v-for="(tag, index) in tags"
              :effect="tag.url === $route.name ? 'dark' : 'plain'"
              closable
              @close="unTag(index)"
              class="tag"
            >
              {{ tag.name }} {{ $router.url }}
            </el-tag>
          </div>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import api from "@/api/api.js";
export default {
  name: "Home",
  data() {
    return {
      menuData: [],
      userData: {},
      isCollapse: false,
      width: "200px",
      tags: [],
      icon: "el-icon-s-fold"
    };
  },
  created() {
    this.getMenu();
    this.tags = localStorage.getItem("tags")
      ? JSON.parse(localStorage.getItem("tags"))
      : [];
  },
  computed: {
    // 根据当前路由确定激活的菜单
    onRouter() {
      return this.$route.name;
    },
    tagStatus() {
      return this.tags.length > 0;
    }
  },
  methods: {
    getMenu() {
      api.roles
        .menu()
        .then(res => {
          if (res.data.code === 200) {
            localStorage.setItem("login", 1);
            this.$store.commit("login", true);
            this.menuData = res.data.data.menu;
            // 将权限存入vuex中(用于按钮权限判断)
            this.$store.commit("setPermission", res.data.data.permission);
            this.userData = res.data.data.user_info;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    tag(value) {
      if (!this.tags.includes(value)) {
        this.tags = localStorage.getItem("tags")
          ? JSON.parse(localStorage.getItem("tags"))
          : [];
        if (JSON.stringify(this.tags).indexOf(JSON.stringify(value)) === -1) {
          this.tags.push(value);
        }
        localStorage.setItem("tags", JSON.stringify(this.tags));
      }
    },
    unTag(index) {
      if (this.$route.name === this.tags[index].url) {
        if (index === 0) {
          this.$router.push("/index");
        } else {
          window.history.back();
          // this.$router.push(this.tags[index-1].url);
        }
      }
      this.tags.splice(index, 1);
      localStorage.setItem("tags", JSON.stringify(this.tags));
    },
    // 选择路由
    select(url) {
      this.$router.push(url);
    },
    // 退出
    logout() {
      api.admins
        .logout()
        .then(res => {
          if (res.data.code === 200) {
            localStorage.setItem("login", 0);
            localStorage.removeItem("tags");
            this.$store.commit("login", false);
            this.$router.push("/login");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    password() {
      this.$router.push("/password");
    },
    status() {
      this.isCollapse = !this.isCollapse;
      if (this.isCollapse) {
        this.width = "65px";
        this.icon = "el-icon-s-unfold";
      } else {
        this.width = "200px";
        this.icon = "el-icon-s-fold";
      }
    }
  }
};
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
}
.el-menu-item.is-active {
  // background-color: #434A50 !important;
  background-color: #f0f7ff !important;
  // border-right: 2px solid #40ff96 !important;
  border-right: 2px solid #409eff !important;
}
.header {
  background: linear-gradient(to right, #a7dec1, #f3d1d0);
  line-height: 60px;
  color: #fff;
  display: flex;
  .header_left {
    color: #fff;
    text-align: center;
    font-size: 14px;
  }
  .header_right {
    display: flex;
    justify-content: space-between;
    flex: 1;
    .header_icon {
      width: 100px;
      text-align: center;
      cursor: pointer;
    }
    .header_action {
      margin-right: 30px;
      display: flex;
      align-items: center;
      .icon {
        margin-right: 10px;
        cursor: pointer;
      }
    }
  }
}
.tags {
  border: 1px solid #fff;
  box-shadow: 0 0 5px 1px rgba(63, 112, 179, 0.5);
  border-radius: 5px;
  padding-top: 10px;
  margin-bottom: 10px;
  .tag {
    margin: 0 10px 10px 10px;
    cursor: pointer !important;
  }
}
</style>
